<template>
  <div id="app">
    <h3>========$attrs, $listeners========</h3>
    <attr-child :name="name" :age="age" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo"></attr-child>
    <br>
    <h3>========inject========</h3>
    <inject-demo />
  </div>
</template>

<script>
import AttrChild from './components/AttrChild.vue'
import InjectDemo from './components/InjectDemo.vue'

export default {
  name: 'App',
  components: {
    AttrChild,
    InjectDemo
  },
  provide() {
    return {
      bar: 'barrbal'
    }
  },
  data() {
    return {
      name: 'Lily',
      age: 22,
      infoObj: {
          from: '上海',
          job: 'policeman',
          hobby: ['reading', 'writing', 'skating']
      }
    }
  },
  methods: {
    updateInfo() {
      console.log('update info')
    },
    delInfo() {
      console.log('delete info')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
